<template>
  <div>
    <div class="login_container" v-show="isShow">
      <div class="login_wrapper">
          <el-input
            placeholder="请输入用户名"
            v-model="username"
            clearable>
            </el-input>
          <el-input
            placeholder="请输入密码"
            v-model="password"
            clearable>
            </el-input>
            <el-button type="primary" @click="login">立即登录</el-button>
      </div>
    </div>
    <img v-show="!isShow" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3458475739,295617657&fm=26&gp=0.jpg" alt="">
  </div>
</template>

<script>
export default {
    data(){
        return{
            username:'',
            password:'',
            isShow:true
        }
    },
    mounted(){
        
    },
    methods:{
        login(){
            if(this.username.length===0 && this.password.length===0){
                this.$message.info("账号密码不可为空");
                return false;
            }
            this.$axios.post("http://ceshi5.dishait.cn/admin/login",{username:this.username,password:this.password}).then(res=>{
            let token = res.data.data.token;
            localStorage.setItem("token",token)
                this.isShow = false
            setTimeout(()=>{
                this.$router.push({path:"/my"})
            },3000)
        }).catch(()=>{
            this.$message.error("账号密码输入错误！！")
        })
        }
    }
}
</script>

<style scoped>
.login_container
{
    width: 100vw;
    height: 100vh;
    background-color: #ccc;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.login_wrapper
{
    width: 400px;
    height: 250px;
    border: 1px solid #fff;
    border-radius: 15px;
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.el-input
{
    margin: 10px 0;
}

img
{
    width: 100vw;
    height: 100vh;
}
</style>